<template>
   <!-- 评论组件 -->
  <div class="ratings">
    <div class="ratingsHeader">
      <div class="leftBox">
        <span class="score">{{sellerData.score}}</span>
        <span class="tt">综合评分</span>
        <span class="rankRate">高于周边商家{{sellerData.rankRate}}%</span>
      </div>
      <div class="rightBox">
        <div class="item">
          <span class="title">服务态度</span>
          <star :score="sellerData.serviceScore" :size="36"></star>
          <span class="num">{{sellerData.serviceScore}}</span>
        </div>
        <div class="item">
          <span class="title">商品评分</span>
          <star :score="sellerData.foodScore" :size="36"></star>
          <span class="num">{{sellerData.foodScore}}</span>
        </div>
        <div class="item">
          <span class="title">送达时间</span>
          <span class="time">{{sellerData.deliveryTime}}分钟</span>
        </div>
      </div>
    </div>
    <divider></divider>
    <div class="ratingsBox">
      <div class="selectBox">
        <!-- 按钮组 -->
        <div class="btnBox">
          <div class="btnItem" :class="{active: btnNum === 2}" @click="btnFn(2)">
            <span class="title">全部</span>
            <span class="num">&nbsp;&nbsp;{{ratingsData.length}}</span>
          </div>
          <div class="btnItem" :class="{active: btnNum === 0}" @click="btnFn(0)">
            <span class="title">满意</span>
            <span class="num">&nbsp;&nbsp;{{satisfiedNum}}</span>
          </div>
          <div class="btnItem" :class="{active: btnNum === 1}" @click="btnFn(1)">
            <span class="title">不满意</span>
            <span class="num">&nbsp;&nbsp;{{dissatisfiedNum}}</span>
          </div>
        </div>
        <!-- 只看有内容的评价 -->
        <div class="iconBox" @click="siContentFn">
          <i class="icon icon-check_circle" :class="{active: hasContent}"></i>
          <span class="tt">只看有内容的评价</span>
        </div>
      </div>
      <!-- 评价内容 用户 -->
      <div class="commentBox">
        <div class="commentItem" v-for="(ratingsItem, ratingsIndex) in commentsData" :key="ratingsIndex" v-show="hasContent ? ratingsItem.text : 'true'">
        <!-- <div class="commentItem" v-for="(ratingsItem, ratingsIndex) in commentsData" :key="ratingsIndex"> -->
          <div class="userBox">
            <img class="avatar" :src="ratingsItem.avatar">
            <div class="userNameBox">
              <span class="username">{{ratingsItem.username}}</span>
              <span class="star"><star :score="ratingsItem.score" :size="24"></star></span>
              <span class="deliveryTime">{{ratingsItem.deliveryTime}}分钟送达</span>
            </div>
            <span class="rateTime">{{ratingsItem.rateTime}}</span>
          </div>
          <div class="text">{{ratingsItem.text}}</div>
          <div class="recommendBox">
            <!-- icon-thumb_up icon-thumb_down -->
            <i class="icon" :class="ratingsItem.rateType ? 'icon-thumb_down downIcon': 'icon-thumb_up upIcon'"></i>
            <div class="recommendList">
              <span class="recommendItem" v-for="(recommendItem, recommendIndex) in ratingsItem.recommend" :key="recommendIndex">{{recommendItem}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import divider from './divider.vue' // 引入分割线组件
  import star from './star.vue' // 引入评星组件
  import utils from '../utils/index.js' // 引入工具类 处理 时间戳转化为指定时间格式
  export default {
    data() {
      return {
        ratingsData: [], // 接收评论的数据
        ratingsData2: [], // 评论数据的副本
        hasContent: false, // 只看有内容的评价 默认false
        btnNum: 2 // 显示全部
      }
    },
    props: {
      sellerData: { // 商家数据
        type: Array,
        requered: true
      }
    },
    computed: { // 计算属性
      satisfiedNum() { // 满意的评价数
        let num = 0
        for (var i = 0; i < this.ratingsData.length; i++) {
          if (this.ratingsData[i].rateType === 0) { // 满意的评价
            num += 1
          }
        }
        return num
      },
      dissatisfiedNum() { // 不满意的评价数
        return this.ratingsData.length - this.satisfiedNum
      },
      commentsData() { // 处理时间戳转化为指定时间格式 的全部评价内容
        let arr = []
        this.ratingsData2.forEach(item => {
          // console.log(utils.formatTime(new Date(item.rateTime))) 2016-07-22 12:21:04
          // console.log(item.rateTime) 时间戳1469281964000
          // 把时间戳转化为时间格式
          item.rateTime = utils.formatTime(new Date(item.rateTime))
          arr.push(item)
        })
        return arr
      }
    },
    components: {
      divider,
      star
    },
    mounted() {
      let that = this
      wx.request({
        url: 'http://localhost:8080/api/ratings',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          if (res.data.errno === 0) {
            that.ratingsData = res.data.data // 评论数据
            that.ratingsData2 = res.data.data // 评论数据副本 为了 显示 全部 满意 不满意
          }
          console.log('ratingsData', res.data.data)
        }
      })
    },
    methods: {
      // 只看有内容的评价 ratingsData
      siContentFn() {
        this.hasContent = !this.hasContent
        // let data = this.ratingsData
        // if (this.hasContent) {
        //   // 过滤返回只有内容的数据
        //   let arr = this.ratingsData.filter(item => item.text !== '')
        //   this.ratingsData = arr
        //   // console.log(this.ratingsData, arr)
        // } else {
        //   // 返回全部的数据
        //   this.ratingsData = data
        // }
      },
      // 全部 满意 不满意 选择 显示评价数据
      btnFn(index) {
        this.btnNum = index
        let arr = []
        this.ratingsData2 = this.ratingsData // 全部的数据
        if (index === 0) { // 满意
          arr = this.ratingsData2.filter(item => item.rateType === index)
          this.ratingsData2 = arr
        } else if (index === 1) { // 不满意的数据
          arr = this.ratingsData2.filter(item => item.rateType === index)
          this.ratingsData2 = arr
        }
      }
    }
  }
</script>

<style lang="sass" scoped>
.ratings
  width: 750rpx
  height: 100%
  .ratingsHeader
    display: flex
    margin: 36rpx 0
    .leftBox
      flex: 0 0 275rpx
      display: flex
      flex-direction: column
      text-align: center
      .score
        font-size: 48rpx
        line-height: 56rpx
        color: rgb(255, 153, 0)
      .tt
        display: inline-block
        margin: 12rpx 0 16rpx 0
        font-size: 24rpx
        line-height: 24rpx
        color: rgb(7, 17, 27)
      .rankRate
        font-size: 20rpx
        line-height: 20rpx
        color: rgba(7, 17, 27, 0.5)
    .rightBox
      flex: 0 0 474rpx
      padding: 0 48rpx
      border-left: 1rpx solid rgba(7, 17, 27, 0.1)
      .item
        margin-bottom: 16rpx
        &:nth-of-type(3)
          margin-bottom: 0
        .title
          display: inline-block
          margin-right: 24rpx
          vertical-align: top
          font-size: 24rpx
          line-height: 36rpx
          color: rgba(7, 17, 27, 1)
        .num
          display: inline-block
          margin-left: 24rpx
          vertical-align: top
          font-size: 24rpx
          line-height: 36rpx
          color: rgba(255, 153, 0, 1)
        .time
          font-size: 24rpx
          line-height: 36rpx
          color: rgba(147, 153, 159, 1)
  .ratingsBox
    .selectBox
      padding: 0 36rpx
      .btnBox
        padding: 36rpx 0
        .btnItem
          display: inline-block
          margin-left: 16rpx
          padding: 16rpx 24rpx
          border-radius: 2rpx
          background-color: rgba(77, 85, 93, 0.2)
          transition: all 0.5s
          & > span
            line-height: 32rpx
            color: rgb(77, 85, 93)
          .title
            font-size: 24rpx
          .num
            font-size: 16rpx
          &.active
            background-color: rgba(0, 160, 220, 1)
            & > span
              color: #fff
      .iconBox
        padding: 24rpx 0
        line-height: 48rpx
        font-size: 0
        border-top: 1rpx solid rgba(7, 17, 27, 0.1)
        color: rgba(147, 153, 159, 1)
        .icon
          display: inline-block
          margin-right: 8rpx
          vertical-align: top
          font-size: 48rpx
          transition: color 0.1s
          &.active
            color: rgba(0, 160, 220, 1)
        .tt
          font-size: 24rpx
    .commentBox
      padding: 0 36rpx
      border-top: 1rpx solid rgba(230, 231, 232, 1)
      .commentItem
        border-bottom: 1rpx solid rgba(7, 17, 27, 0.1)
        padding-top: 36rpx
        .userBox
          display: flex
          margin-bottom: 12rpx
          .avatar
            flex: 0 0 56rpx
            margin-right: 24rpx
            width: 56rpx
            height: 56rpx
            overflow: hidden
            border-radius: 50%
          .userNameBox
            flex: 2
            font-size: 0
            .username
              display: block
              margin-bottom: 8rpx
              font-size: 20rpx
              line-height: 24rpx
              color: rgba(7, 17, 27, 1)
            .star
              vertical-align: top
            .deliveryTime
              display: inline-block
              margin-left: 12rpx
              margin-top: 2rpx
              vertical-align: top
              font-size: 20rpx
              font-weight: 200
              line-height: 24rpx
              color: rgba(147, 153, 159, 1)
          .rateTime
            flex: 1
            font-size: 20rpx
            font-weight: 200
            line-height: 24rpx
            text-align: right
            color: rgba(147, 153, 159, 1)
        .text
          padding: 0 0 16rpx 80rpx
          font-size: 24rpx
          line-height: 36rpx
          color: rgba(7, 17, 27, 1)
        .recommendBox
          display: flex
          padding: 0 0 36rpx 80rpx
          .icon
            display: inline-block
            vertical-align: top
            font-size: 24rpx
            line-height: 32rpx
            &.upIcon
              color: rgba(0, 160, 220, 1)
            &.downIcon
              color: rgba(183, 187, 191, 1)
          .recommendList
            .recommendItem
              display: inline-block
              margin-left: 16rpx
              padding: 0 12rpx
              max-width: 90rpx
              overflow: hidden
              white-space: nowrap
              text-overflow: ellipsis
              font-size: 18rpx
              line-height: 32rpx
              color: rgba(147, 153, 159, 1)
              border: 1rpx solid rgba(7, 17, 27, 0.1)
              border-radius: 2rpx
              background-color: rgba(255, 255, 255, 1)
</style>
